<template>
  <div>


    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="name" placeholder="请输入名称"></el-input>
      </el-form-item>


      <el-form-item label="">
        <el-input v-model="author" placeholder="请输入作者名称"></el-input>
      </el-form-item>

      <el-form-item label="">
        <el-select v-model="categoryId" clearable placeholder="请选择分类">
          <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="fetchAllData">搜索</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        >

      <span>
        <el-form :model="goodsInsertForm" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="goodsInsertForm.name"></el-input>
          </el-form-item>

             <el-form-item label="版本号">
            <el-input v-model="goodsInsertForm.goodsno"></el-input>
          </el-form-item>

             <el-form-item label="作者">
            <el-input v-model="goodsInsertForm.author"></el-input>
          </el-form-item>

        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="insertGoods">新增</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="提示"
        :visible.sync="dialogUpdateVisible"
        width="30%"
    >

      <span>
        <el-form :model="goodsUpdateForm" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="goodsUpdateForm.name"></el-input>
          </el-form-item>

             <el-form-item label="版本号">
            <el-input v-model="goodsUpdateForm.goodsno"></el-input>
          </el-form-item>

             <el-form-item label="作者">
            <el-input v-model="goodsUpdateForm.author"></el-input>
          </el-form-item>

<!--          添加日期选择器-->
          <el-form-item label="作者">
                       <el-date-picker
                           v-model="goodsUpdateForm.uptime"
                           type="datetime"
                           placeholder="选择日期时间">
    </el-date-picker>
          </el-form-item>


        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUpdateVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateGoods">更新</el-button>
  </span>
    </el-dialog>


    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="书名"
          width="180">
      </el-table-column>

      <el-table-column
          prop="goodsno"
          label="书版本号"
          width="180">
      </el-table-column>

      <el-table-column
          prop="author"
          label="作者"
          width="100">
      </el-table-column>

      <el-table-column
          prop="categoryName"
          label="分类"
          width="100">
      </el-table-column>

      <el-table-column
          prop="uptime"
          label="日期"
          width="180">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="updateDirOper(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {

    return {
      tableData: [],
      totalCount: -1,//数据总条数
      author: '',
      name: '',
      currentPage: 1,// 当前页
      pageSize: 5,// 当前页大小
      dialogVisible: false,
      goodsInsertForm: {
        goodsno:''
      },//插入商品对象
      goodsUpdateForm:{},//更新商品对象
      dialogUpdateVisible:false,// 更新商品弹框 布尔值
      categoryList:[
      ],//分类数组
      categoryId:'',//选中的分类id
    }
  },
  created() {
    this.fetchAllData()
    this.findAllCategory()
  },
  methods: {
    //获取所有的分类
    findAllCategory(){
      request.get("/category/findAllCategory",{})
      .then(res=>{
        this.categoryList = res.data
      })
    },
    del(goodsId){
      request.get("/goods/deleteById",{
        params:{
          id:goodsId
        }
      }).then(res=>{
        console.log(res.data)

      })
    },
    //打开更新商品的弹框，并且查询数据
    updateDirOper(goodsId){
      // console.log(goodsId)
    //  根据id 查询当前数据
      request.get("/goods/findById",{
        params:{
          id:goodsId
        }
      }).then(res=>{
        console.log(res.data)
        this.goodsUpdateForm = res.data
        this.dialogUpdateVisible=true
      })
    },
    //根据id更新商品数据
    updateGoods(){
      request.post("/goods/updateGoods",this.goodsUpdateForm)
      .then(res=>{
            if(res.code === 200){
              //提示成功
              this.$message.success(res.msg);
              //重新查询数据
              this.fetchAllData()
              //关闭弹窗
              this.dialogUpdateVisible = false
            }
      })
    },
    //插入商品数据
    insertGoods() {
      console.log("当前新增数据对象：",this.goodsInsertForm)
      request.post('/goods/addGoods',this.goodsInsertForm)
      .then(res=>{
        console.log(res)
        if(res.code === 200){
          this.$message.success(res.msg);
          this.fetchAllData()
          this.dialogVisible = false
          this.goodsInsertForm = {}
        }else {
          this.$message.error('新增失败');
        }
      })
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchAllData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchAllData()
      console.log(`当前页: ${val}`);
    },
    // 获取后端的商品数据 fetchAllData
    fetchAllData() {
      const obj = {
        name: this.name,
        author: this.author,
        page: this.currentPage,
        limit: this.pageSize,
        categoryId: this.categoryId
      }
      request.get("/goods/findGoods", {
        params: obj
      })
          .then(res => {
            console.log(res)
            this.totalCount = res.data.totalCount
            this.tableData = res.data.list
          })
    }
  },
};
</script>
